<template>
    <view class="page">
        <view class="box">
            <view class="use flex" @tap="up_header">
                <view class="font-30">{{ $t('settingPage.headPicture') }}</view>
                <image :src="head_pic" />
            </view>
            <view class="flex more" @tap="to_name">
                <view class="font-30">{{ $t('settingPage.nickname') }}</view>
                <view class="font-30 value" style="padding-right:60rpx">{{ user.nickname }}</view>
            </view>
            <view class="flex" v-if="user.mobile">
                <view class="font-30">{{ $t('settingPage.phoneNumber') }}</view>
                <view class="font-30 value">{{ user.mobile }}</view>
            </view>
            <!-- <view class="flex" :class="user.is_attestation?'':'more'" @tap="to_shiming">
				<view class="font-30">实名认证</view>
				<view class="font-30" :class="user.is_attestation?'value':'red'">
					{{user.is_attestation?user.realname:'未实名'}}
				</view>
			</view> -->
        </view>
        <view class="box mar-top-20">
            <view class="flex more" @tap="to_upPsw">
                <view class="font-30">{{ $t('settingPage.changingLoginPassword') }}</view>
            </view>
            <view class="flex more" @tap="to_mdf">
                <view class="font-30">{{ $t('settingPage.changePaymentPassword') }}</view>
            </view>
        </view>
        <view class="box mar-top-20">
            <view class="flex more" @tap="to_feedback">
                <view class="font-30">{{ $t('settingPage.feedback') }}</view>
            </view>
            <view class="flex more" @tap="to_about">
                <view class="font-30">{{ $t('settingPage.aboutUs') }}</view>
            </view>
            <view class="flex more" @tap="$navigateTo('/my/cancellation/cancellation')">
                <view class="font-30">{{ $t('settingPage.cancellation') }}</view>
            </view>
        </view>
        <button class="logout" :class="[$i18n.locale]" @tap="logout">{{ $t('settingPage.logout') }}</button>
        <!-- #ifdef APP-PLUS -->
        <!-- <view class="box mar-top-20">
			<view class="flex" @tap="to_version">
				<view class="font-30">版本号</view>
				<view class="font-30">{{ver}}</view>
			</view>
		</view>
		<button class="logout" @tap="logout">退出登录</button> -->
        <!-- #endif -->
        <image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
    </view>
</template>

<script>
    import {
        mapGetters,
        mapMutations,
        mapState
    } from 'vuex'
    import ImageCropper from './invinbg-image-cropper.vue'
    var _this
    export default {
        components: {
            ImageCropper
        },
        data() {
            return {
                tempFilePath: '',
                ver: '',
                updateInfo: {}
            }
        },
        methods: {
            ...mapMutations(['set_user']),
            to_upPsw() {
                uni.navigateTo({
                    url: '/pages/forgetPSW?type=1'
                })
            },
            to_name() {
                uni.navigateTo({
                    url: '/my/name/name'
                })
            },
            to_shiming() {
                if (this.user.is_attestation == 0) {
                    uni.navigateTo({
                        url: '/my/shiming/shiming'
                    })
                }
            },
            to_mdf() {
                uni.navigateTo({
                    url: '/my/mdf_password/mdf_password'
                })
            },
            to_feedback() {
                uni.navigateTo({
                    url: '/my/feedback/feedback'
                })
            },
            to_about() {
                uni.navigateTo({
                    url: '/my/about/about?title=关于我们&id=14'
                })
            },
            logout() {
                uni.showModal({
                    title: this.$t('showModalTitle'),
                    content: this.$t('settingPage.showModalContent'),
                    success: res => {
                        if (res.confirm) {
                            this.$http('post|api/User/logout')
                                .then(res => {
                                    this.$toastApp(this.$t('settingPage.showModalSuccess'))
                                    this.$store.commit('logout')
                                    this.$store.dispatch('get_token')
                                    setTimeout(() => {
                                        uni.reLaunch({
                                            url: '/pages/my'
                                        })
                                    }, 1000)
                                })
                                .catch(err => {
                                    this.$toastApp(err.msg, 'none')
                                })
                        }
                    }
                })
            },
            up_header() {
                uni.chooseImage({
                    count: 1,
                    success: res => {
                        this.tempFilePath = res.tempFilePaths.shift()
                    }
                })
            },
            confirm(e) {
                this.$uploadHeader(e.detail.tempFilePath).then(res => {
                    if (res.result) {
                        this.$http('post|api/User/userinfo', {
                            head_pic: res.result
                        }).then(result => {
                            this.tempFilePath = ''
                            const data = {
                                ...this.user,
                                head_pic: res.result

                            }
                            this.set_user(data)
                            this.$toastApp(result.msg)
                        })
                    }
                })

            },
            cancel() {
                // console.log('canceled')
            }

        },
        computed: {
            ...mapState(['user']),
            ...mapGetters(['head_pic'])
        },
        onShow() {
            // #ifdef APP-PLUS
            plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
                that.ver = widgetInfo.version
            })
            // #endif
        },
        onLoad() {
            uni.setNavigationBarTitle({
                title: this.$i18n.t('settingPage.navigationBarTitle')
            })
        }
    }
</script>

<style lang="scss">
    .page {
        min-height: calc(100vh - 88rpx);
        background-color: #f7f7f7;

        .box {
            padding: 0 30rpx;
            box-sizing: border-box;
            background-color: #ffffff;

            .flex {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10rpx 0;
                border-bottom: 1rpx solid #f5f6f7;
                min-height: 100rpx;
                position: relative;

                .value {
                    color: #808080;
                }

                .red {
                    color: #f53e3e;
                    padding-right: 60rpx;
                }
            }

            .more::after {
                position: absolute;
                height: 40rpx;
                width: 40rpx;
                content: '';
                background-image: url(../../static/more.png);
                background-size: 100%;
                top: 50%;
                margin-top: -20rpx;
                right: 0;
            }

            .use image {
                height: 100rpx;
                width: 100rpx;
                border-radius: 50%;
            }

        }

        .mar-top-20 {
            margin-top: 20rpx;
        }

        .logout {
            width: 690rpx;
            height: 90rpx;

            border-radius: 46rpx;
            color: #ffffff;
            line-height: 90rpx;
            font-size: 32rpx;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: center;
            margin-top: 60rpx;

            &.zh {
                background: var(--theme);
            }

            &.hk {
                background: var(--themeHK);
            }
        }
    }
</style>
